<template>
  <div id="slideSmaillInformation" class="box-content" v-show="this.$store.state.isSlideInfo">
    <ul class="link-list">
      <!-- <router-link to="/inpatients" tag="li"  @click.native="isSlide"></router-link> -->
      <router-link v-for="(item,index) in list"
                   :key="item.value" :to="{path:item.path,query:{item:index}}"
                   :class="{'router-link-exact-active':ind == index}"
                   @click.native="changeBgc(index)" tag="li">
        <div>
          <i></i>
          <p>{{item.label}}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
      data : function(){
      return{
        list: [
          {path:'/inpatients',label:'首页'},
          {path:'/basicInformation',label:'信息'},
          {path:'/medicalAdvice',label:'医嘱'},
          {path:'/medicalHistory',label:'病历'},
          {path:'/reportpage',label:'报告'},
          { path:'/physicalSignPage',label:'体征'},
          { path:'/operationPage',label:'手术'},
          { path: '/scorePage', label: '评分' },
          { path: '/nursingListPage', label: '特护单' },
      ],
      ind: '0',
      }

    },
    methods : {
       changeBgc(index){
      this.ind = index;
         if (index == 0) {
           this.$store.dispatch('slide');
           this.$store.state.flags = false;
           this.$router.push({
             name: "inpatients",
             query: { item: 0, department: 1 }
           });
           //console.log(this.$store.state.isSlide)
         } else if (index == 5) {
           this.$router.push({
             path: '/physicalSignPage/signsVs/signsVsSubSurface',
             query: { in: 0,item:5}
           })
         }
    }
         },
    mounted(){
      if (this.$route.query.item) {
        this.ind = this.$route.query.item;
      }  else {
        this.ind = 0;
      }

  }
    }

</script>
<style scoped>
  #slideSmaillInformation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .link-list li {
    width: 50px;
    height: 7vh;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
    font-size: 12px;
    color: #8a8a8a;
    margin-bottom: 10px;
  }
  .link-list li div{
    text-align:center;
  }
  .link-list li.router-link-exact-active {
    background-color: #11a7f3;
  }
  .link-list li i{
       display: inline-block;
       width: 23px;
       height: 23px;
       background-image: url('../../../../static/images/home.png');
       background-size: cover;
       background-repeat:no-repeat;
     }
  .link-list li.router-link-exact-active {
    color: #FFF;
  }

  .link-list li:first-child.router-link-exact-active {
    background-color: #f7f7f7;
    color: #8a8a8a;
  }
  .link-list li:nth-child(2) i {
    background-image: url('../../../../static/images/information_icon.png');
  }
  .link-list li:nth-child(2).router-link-exact-active i {
    background-image: url('../../../../static/images/active_information_icon.png');
  }
  .link-list li:nth-child(3) i {
    background-image: url('../../../../static/images/medical_icon.png');
  }
  .link-list li:nth-child(3).router-link-exact-active i {
    background-image: url('../../../../static/images/active_medical_icon.png');
  }
  .link-list li:nth-child(4) i {
    background-image: url('../../../../static/images/case_icon.png');
  }
  .link-list li:nth-child(4).router-link-exact-active i {
    background-image: url('../../../../static/images/active_case_icon.png');
  }
  .link-list li:nth-child(5) i {
    background-image: url('../../../../static/images/report_icon.png');
  }
  .link-list li:nth-child(5).router-link-exact-active i {
    background-image: url('../../../../static/images/active_report_icon.png');
  }
  .link-list li:nth-child(6) i {
    background-image: url('../../../../static/images/sign_icon.png');
  }
  .link-list li:nth-child(6).router-link-exact-active i {
    background-image: url('../../../../static/images/active_sign_icon.png');
  }
  .link-list li:nth-child(7) i {
    background-image: url('../../../../static/images/surgery_icon.png');
  }
  .link-list li:nth-child(7).router-link-exact-active i {
    background-image: url('../../../../static/images/active_surgery_icon.png');
  }
  .link-list li:nth-child(8) i {
    background-image: url('../../../../static/images/score_icon.png');
  }
  .link-list li:nth-child(8).router-link-exact-active i {
    background-image: url('../../../../static/images/active_score_icon.png');
  }
  .link-list li:nth-child(9) i {
    background-image: url('../../../../static/images/nursing_icon.png');
  }
  .link-list li:nth-child(9).router-link-exact-active i {
    background-image: url('../../../../static/images/active_nursing_icon.png');
  }
</style>
